<template>
  <div>
    <div v-for="(o, index) in 8" :key="o" class="top6" @click="jump(index)">
      <div class="tp1">
        <el-image class="tp2" :src="imgs[index]"> </el-image>
      </div>
      <div class="tp3">
        <span
        class="tp4"
          >电影名: {{ name[index] }}</span
        >
        <span
        class="tp5"
          >导演: {{ director[index] }}</span
        >
        <span
        class="tp6"
          >主演: {{ mrole[index] }}</span
        >
        <span
        class="tp7"
          >语言:
          <el-tag class="ml" type="primary">{{ mlanguage[index] }}</el-tag></span
        >
        <span
        class="tp8"
          >电影类型: {{ mtype[index] }}</span
        >
      </div>
      <div class="tp9">
        <span
        class="tp10"
          >推荐指数</span
        >
      </div>
      <div class="tp11">
        <span
        class="tp12"
          >{{ score[index] }}</span
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'
import router from '@/router'
import '@/assets/scss/userCom/top8.scss'
const score = ref([])
const name = ref([])
const imgs = ref([])
const director = ref([])
const mrole = ref([])
const mlanguage = ref([])
const mtype = ref([])

const getData = () => {
  axios
    .get('/api/suggest/getSuggestTop8ByUid' + '/' + JSON.parse(sessionStorage.getItem('uid')))
    .then((res) => {
      imgs.value = []
      name.value = []
      director.value = []
      mrole.value = []
      mlanguage.value = []
      mtype.value = []
      score.value = []
      for (const item of res.data) {
        imgs.value.push(require('@/assets/moviesPic/' + item.pic))
        name.value.push(item.mname)
        director.value.push(item.director)
        mrole.value.push(item.mrole)
        mlanguage.value.push(item.mlanguage)
        mtype.value.push(item.mtype)
        score.value.push(item.suggest)
      }
      console.log(name.value)
    })
    .catch(() => {
      ElMessage.warning('未查找到给该用户推荐的电影信息！')
    })
}

onMounted(() => {
  getData()
})
const jump = (index) => {
  sessionStorage.setItem('movieInfo', JSON.stringify(name.value[index]))
  router.push('/movieInfo')
}
</script>
